<template>
  <div class="orders">
    <h1>我的订单</h1>
    
    <div v-if="orders.length > 0" class="orders-list">
      <div v-for="order in orders" :key="order.id" class="order-card">
        <div class="order-header">
          <div class="order-info">
            <span class="order-id">订单号: <span v-text="order.id"></span></span>
            <span class="order-date" v-text="order.date"></span>
          </div>
          <span class="order-status" :class="order.status" v-text="order.statusText"></span>
        </div>
        
        <div class="order-items">
          <div v-for="item in order.items" :key="item.id" class="order-item">
            <img :src="item.image" :alt="item.name" class="item-image">
            <div class="item-details">
              <h3 class="item-name" v-text="item.name"></h3>
              <p class="item-price">¥<span v-text="item.price"></span> x <span v-text="item.quantity"></span></p>
            </div>
            <div class="item-total">¥<span v-text="((item.price || 0) * (item.quantity || 0)).toFixed(2)"></span></div>
          </div>
        </div>
        
        <div class="order-summary">
          <div class="summary-row">
            <span>商品总价:</span>
            <span>¥<span v-text="(order.subtotal || 0).toFixed(2)"></span></span>
          </div>
          <div class="summary-row">
            <span>运费:</span>
            <span>¥<span v-text="(order.shipping || 0).toFixed(2)"></span></span>
          </div>
          <div class="summary-row">
            <span>优惠:</span>
            <span v-if="order.discount > 0" class="discount">-¥<span v-text="(order.discount || 0).toFixed(2)"></span></span>
            <span v-else>-</span>
          </div>
          <div class="summary-row total">
            <span>总计:</span>
            <span>¥<span v-text="(order.total || 0).toFixed(2)"></span></span>
          </div>
        </div>
        
        <div class="order-actions">
          <button 
            v-if="order.status === 'pending'" 
            @click="cancelOrder(order)" 
            class="cancel-btn"
          >
            取消订单
          </button>
          <button 
            v-if="order.status === 'pending'" 
            @click="payOrder(order)" 
            class="pay-btn"
          >
            立即支付
          </button>
          <button 
            v-if="order.status === 'delivered'" 
            @click="confirmReceipt(order)" 
            class="confirm-btn"
          >
            确认收货
          </button>
        </div>
      </div>
    </div>
    
    <div v-else class="no-orders">
      <p>暂无订单</p>
      <router-link to="/products" class="continue-shopping">去购物</router-link>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { mockOrders } from '../utils/mockData.js'

export default {
  name: 'Orders',
  setup() {
    const getOrderStatusText = (status) => {
      const statusMap = {
        'pending': '待支付',
        'paid': '已支付',
        'delivered': '已送达',
        'completed': '已完成',
        'cancelled': '已取消'
      };
      return statusMap[status] || status;
    }
    
    // 使用模拟订单数据
    const orders = ref(mockOrders.map(order => ({
      ...order,
      statusText: getOrderStatusText(order.status),
      subtotal: order.items.reduce((sum, item) => sum + (item.price * item.quantity), 0),
      total: order.items.reduce((sum, item) => sum + (item.price * item.quantity), 0) + (order.shipping || 0) - (order.discount || 0)
    })));

    
    const cancelOrder = (order) => {
      alert(`订单 ${order.id} 已取消`)
      order.status = 'cancelled'
      order.statusText = '已取消'
    }
    
    const payOrder = (order) => {
      alert(`订单 ${order.id} 支付成功`)
      order.status = 'paid'
      order.statusText = '已支付'
    }
    
    const confirmReceipt = (order) => {
      alert(`订单 ${order.id} 已确认收货`)
      order.status = 'completed'
      order.statusText = '已完成'
    }
    
    return {
      orders,
      cancelOrder,
      payOrder,
      confirmReceipt
    }
  }
}
</script>

<style scoped>
.orders {
  padding: 2rem 0;
}

.orders h1 {
  text-align: center;
  margin-bottom: 2rem;
  color: #333;
}

.order-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}

.order-info {
  display: flex;
  flex-direction: column;
}

.order-id {
  font-weight: bold;
  margin-bottom: 0.3rem;
}

.order-date {
  color: #666;
  font-size: 0.9rem;
}

.order-status {
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: bold;
}

.order-status.pending {
  background-color: #fff3e0;
  color: #f57c00;
}

.order-status.paid {
  background-color: #e8f5e9;
  color: #42b983;
}

.order-status.delivered {
  background-color: #e3f2fd;
  color: #2196f3;
}

.order-status.completed {
  background-color: #f3e5f5;
  color: #9c27b0;
}

.order-status.cancelled {
  background-color: #ffebee;
  color: #f44336;
}

.order-items {
  margin-bottom: 1.5rem;
}

.order-item {
  display: flex;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid #eee;
}

.order-item:last-child {
  border-bottom: none;
}

.item-image {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 1rem;
}

.item-details {
  flex: 1;
}

.item-name {
  margin-bottom: 0.3rem;
  color: #333;
}

.item-price {
  color: #666;
  font-size: 0.9rem;
}

.item-total {
  font-weight: bold;
  color: #333;
}

.order-summary {
  margin-bottom: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.summary-row.total {
  font-size: 1.1rem;
  font-weight: bold;
  color: #333;
  margin-top: 0.5rem;
}

.discount {
  color: #e91e63;
  font-weight: bold;
}

.order-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}

.cancel-btn, .pay-btn, .confirm-btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.cancel-btn {
  background-color: #f44336;
  color: white;
}

.cancel-btn:hover {
  background-color: #d32f2f;
}

.pay-btn {
  background-color: #42b983;
  color: white;
}

.pay-btn:hover {
  background-color: #359c6d;
}

.confirm-btn {
  background-color: #2196f3;
  color: white;
}

.confirm-btn:hover {
  background-color: #1976d2;
}

.no-orders {
  text-align: center;
  padding: 3rem;
}

.no-orders p {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: #666;
}

.continue-shopping {
  color: #42b983;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1rem;
}

.continue-shopping:hover {
  text-decoration: underline;
}
</style>